<template>
  <div v-loading="loading">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>CPU信息</span>
          </div>
          <el-tooltip placement="top">
            <div slot="content" style="font-size: 14px">
              系统使用率：{{ monitor.cpuInfo.system }}<br />
              用户使用率：{{ monitor.cpuInfo.user }}<br />
              等待率：{{ monitor.cpuInfo.wait }}<br />
              空闲率：{{ monitor.cpuInfo.free }}<br />
            </div>
            <div id="cpu" style="height: 160px; width: 100%"></div>
          </el-tooltip>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>内存信息</span>
          </div>
          <el-tooltip placement="top">
            <div slot="content" style="font-size: 14px">
              总容量：{{ monitor.memoryInfo.total }}<br />
              可用容量：{{ monitor.memoryInfo.free }}<br />
              已用容量：{{ monitor.memoryInfo.used }}<br />
            </div>
            <div id="memory" style="height: 160px; width: 100%"></div>
          </el-tooltip>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>存储信息</span>
          </div>
          <el-tooltip placement="top">
            <div slot="content" style="font-size: 14px">
              总容量：{{ monitor.storeInfo.total }}<br />
              可用容量：{{ monitor.storeInfo.free }}<br />
              已用容量：{{ monitor.storeInfo.used }}<br />
            </div>
            <div id="store" style="height: 160px; width: 100%"></div>
          </el-tooltip>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>JVM信息</span>
          </div>
          <el-tooltip placement="top">
            <div slot="content" style="font-size: 14px">
              总容量：{{ monitor.jvmInfo.total }}<br />
              可用容量：{{ monitor.jvmInfo.free }}<br />
              已用容量：{{ monitor.jvmInfo.used }}<br />
            </div>
            <div id="jvm" style="height: 160px; width: 100%"></div>
          </el-tooltip>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="margin-top: 12px">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>服务器信息</span>
          </div>
          <div>
            <el-descriptions
              class="margin-top"
              :column="2"
              :border="true"
              :labelStyle="{ width: '120px' }"
            >
              <el-descriptions-item>
                <template slot="label"> 名称 </template>
                {{ monitor.systemInfo.name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 操作系统 </template>
                {{ monitor.systemInfo.os }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> IP </template>
                {{ monitor.systemInfo.address }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 架构 </template>
                {{ monitor.systemInfo.arch }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="margin-top: 12px">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>CPU信息</span>
          </div>
          <div>
            <el-descriptions
              class="margin-top"
              :column="2"
              :border="true"
              :labelStyle="{ width: '120px' }"
            >
              <el-descriptions-item>
                <template slot="label"> 型号 </template>
                {{ monitor.cpuInfo.type }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 数量 </template>
                {{ monitor.cpuInfo.code }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 物理核心数 </template>
                {{ monitor.cpuInfo.physical }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 逻辑核心数 </template>
                {{ monitor.cpuInfo.logic }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="margin-top: 12px">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>JVM信息</span>
          </div>
          <div>
            <el-descriptions
              class="margin-top"
              :column="2"
              :border="true"
              :labelStyle="{ width: '120px' }"
            >
              <el-descriptions-item :span="2">
                <template slot="label"> 名称 </template>
                {{ monitor.jvmInfo.jvmName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 版本 </template>
                {{ monitor.jvmInfo.jvmVersion }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 启动时间 </template>
                {{ monitor.jvmInfo.startTime }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 运行时长 </template>
                {{ monitor.jvmInfo.runTime }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> Java版本 </template>
                {{ monitor.jvmInfo.javaVersion }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> Java路径 </template>
                {{ monitor.jvmInfo.javaHome }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 项目路径 </template>
                {{ monitor.jvmInfo.project }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 运行参数 </template>
                {{ monitor.jvmInfo.jvmParams }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getServerInfo } from "@/api/system/monitor";
export default {
  name: "HomeView",
  mounted() {
    this.loadServerInfo();
  },
  data() {
    return {
      loading: true,
      monitor: {
        cpuInfo: {
          code: "",
          free: "",
          logic: "",
          physical: "",
          system: "",
          total: "",
          type: "",
          user: "",
          wait: "",
        },
        jvmInfo: {
          free: "",
          javaHome: "",
          javaVersion: "",
          jvmName: "",
          jvmParams: "",
          jvmVersion: "",
          project: "",
          rate: "",
          runTime: "",
          startTime: "",
          total: "",
          used: "",
        },
        systemInfo: {
          address: "",
          arch: "",
          name: "",
          os: "",
        },
        storeInfo: {
          total: "",
          free: "",
          used: "",
          rate: "",
        },
        memoryInfo: {
          total: "",
          free: "",
          used: "",
          rate: "",
        },
      },
    };
  },
  methods: {
    initStoreCharts() {
      const storeChart = this.$echarts.init(document.getElementById("store"));

      const option = {
        series: [
          {
            type: "gauge",
            radius: "100%",
            axisLine: {
              lineStyle: {
                width: 8,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}%",
              color: "auto",
              fontSize: 24,
            },
            data: [
              {
                value: this.monitor.storeInfo.rate,
              },
            ],
          },
        ],
      };

      storeChart.setOption(option);
    },
    initCpuCharts() {
      const cpuChart = this.$echarts.init(document.getElementById("cpu"));

      const option = {
        series: [
          {
            type: "gauge",
            radius: "100%",
            axisLine: {
              lineStyle: {
                width: 8,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}%",
              color: "auto",
              fontSize: 24,
            },
            data: [
              {
                value: this.monitor.cpuInfo.total,
              },
            ],
          },
        ],
      };

      cpuChart.setOption(option);
    },
    initMemoryCharts() {
      const memoryChart = this.$echarts.init(document.getElementById("memory"));

      const option = {
        series: [
          {
            type: "gauge",
            radius: "100%",
            axisLine: {
              lineStyle: {
                width: 8,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}%",
              color: "auto",
              fontSize: 24,
            },
            data: [
              {
                value: this.monitor.memoryInfo.rate,
              },
            ],
          },
        ],
      };

      memoryChart.setOption(option);
    },
    initJvmCharts() {
      const jvmChart = this.$echarts.init(document.getElementById("jvm"));

      const option = {
        series: [
          {
            type: "gauge",
            radius: "100%",
            axisLine: {
              lineStyle: {
                width: 8,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}%",
              color: "auto",
              fontSize: 24,
            },
            data: [
              {
                value: this.monitor.jvmInfo.rate,
              },
            ],
          },
        ],
      };

      jvmChart.setOption(option);
    },
    loadServerInfo() {
      const t = this;
      getServerInfo()
        .then((response) => {
          t.monitor = response.data;

          t.initCpuCharts();
          t.initStoreCharts();
          t.initMemoryCharts();
          t.initJvmCharts();

          t.loading = false;
        })
        .catch(() => {
          t.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-loading-spinner {
  top: 30%;
}
</style>
